import ProgramList from "../ProgramList";
import FullSizeModal from "../FullSizeModal";
import { Button } from "antd";
import type { IProgram, IProgramStatus } from "@/lib/types";
import { useState } from "react";

type ProgramSelectModalProps = {
  visible: boolean;
  onClose: () => void;
  onConfirmSelection: (program: IProgram, status: IProgramStatus[]) => void;
};
export default function ProgramSelectModal(props: ProgramSelectModalProps) {
  const { visible, onClose, onConfirmSelection } = props;
  const [selected, setSelected] = useState<{
    program?: IProgram;
    status?: IProgramStatus[];
  }>({
    program: undefined,
    status: undefined,
  });

  function handleConfirm() {
    if (selected.program && selected.status) {
      onConfirmSelection(selected.program, selected.status);
      onClose();
    }
  }

  return (
    <FullSizeModal
      visible={visible}
      title="程序选择"
      onClose={onClose}
      fullscreen
    >
      <div className="flex h-full flex-col py-4">
        <div className="min-h-0 flex-auto">
          <ProgramList
            editable
            onSelectedProgramStatusChange={(program, status) =>
              setSelected({ program, status })
            }
          />
        </div>
        <div className="mt-8 flex flex-none justify-center">
          <Button
            type="primary"
            disabled={!(selected.program && selected.status)}
            onClick={handleConfirm}
          >
            确定
          </Button>
        </div>
      </div>
    </FullSizeModal>
  );
}
